<div [@routerTransition]>
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="entityFullName" [breadcrumbs]="breadcrumbs">
            <div role="actions">
                <button *ngIf="'Pages.Administration.DynamicEntityProperties.Create' | permission"
                        class="btn btn-primary" (click)="addNewDynamicEntityProperty()"><i
                    class="fa fa-plus"></i>{{"AddNewDynamicEntityProperty" | localize}}</button>
            </div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <div class="row align-items-center">
                        <!--<Primeng-TurboTable-Start>-->
                        <div class="col primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <p-table #dataTable (onLazyLoad)="getDynamicEntityProperties()"
                                [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [responsive]="primengTableHelper.isResponsive">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th> {{'DynamicProperty' | localize}} </th>
                                        <th style="width: 100px;"> {{'Actions' | localize}} </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td>
                                            {{record.dynamicPropertyName}}
                                        </td>
                                        <td>
                                            <button
                                                *ngIf="'Pages.Administration.DynamicEntityProperties.Delete' | permission"
                                                class="btn btn-danger bt-sm"
                                                    (click)="deleteDynamicEntityProperty(record.id)">{{'Delete' | localize}}</button>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{'NoData' | localize}}
                            </div>
                        </div>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
            </div>
            <create-dynamic-entity-property-modal #createDynamicEntityPropertyModal (modalSave)="getDynamicEntityProperties()">
            </create-dynamic-entity-property-modal>
        </div>
    </div>
</div>
